@import "../var";

.nav--color(@background-color: @nav-background-color, @color: @nav-color) {
  background-color: @background-color;
  color: @color;
}

.nav__item--color(@background-color: @nav-item-hover-background-color, @hover-color: @nav-item-hover-color) {
  &:not(:disabled) {
    &:hover {
      background-color: @background-color;
      color: @hover-color;
    }

    &:focus {
      box-shadow: @box-shadow-focus;
    }

    &:active {
      background-color: darken(@background-color, @color-tint);
      color: @hover-color;
    }
  }
}

.nav__item--active(@background-color: @nav-item-active-background-color, @hover-color: @nav-item-active-color) {
  background-color: @background-color;
  color: @hover-color;
}
